<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" size="small" label-width="auto">
      <el-form-item label="输入搜索：">
        <el-input v-model="listQuery.id" class="input-width" placeholder="服务单号"></el-input>
      </el-form-item>
      <el-form-item label="处理状态：">
        <el-select v-model="listQuery.status" placeholder="全部" clearable class="input-width">
          <el-option v-for="item in APPLY_STATUS_MAP" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请时间：">
        <el-date-picker class="input-width" v-model="listQuery.createTime" value-format="YYYY-MM-DD" type="date" placeholder="请选择时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="操作人员：">
        <el-input v-model="listQuery.handleMan" class="input-width" placeholder="全部"></el-input>
      </el-form-item>
      <el-form-item label="处理时间：">
        <el-date-picker class="input-width" v-model="listQuery.handleTime" value-format="YYYY-MM-DD" type="date" placeholder="请选择时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearchList" size="small"> 搜索 </el-button>
        <el-button @click="handleResetSearch" size="small"> 重置 </el-button>
      </el-form-item>
    </el-form>
    <div class="table-container">
      <el-table
        ref="returnApplyTable"
        height="100%"
        :data="list"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="listLoading"
        border
      >
        <el-table-column type="selection" width="60" align="center"></el-table-column>
        <el-table-column label="服务单号" width="180" align="center">
          <template #default="{ row }">{{ row.id }}</template>
        </el-table-column>
        <el-table-column label="申请时间" width="180" align="center">
          <template #default="{ row }">{{ formatDateTime(row.createTime) }}</template>
        </el-table-column>
        <el-table-column label="用户账号" align="center">
          <template #default="{ row }">{{ row.memberUsername }}</template>
        </el-table-column>
        <el-table-column label="退款金额" width="180" align="center">
          <template #default="{ row }">￥{{ formatReturnAmount(row) }}</template>
        </el-table-column>
        <el-table-column label="申请状态" width="180" align="center">
          <template #default="{ row }">{{ APPLY_STATUS_DICT[row.status] }}</template>
        </el-table-column>
        <el-table-column label="处理时间" width="180" align="center">
          <template #default="{ row }">{{ formatDateTime(row.handleTime) }}</template>
        </el-table-column>
        <el-table-column label="操作" width="80" align="center">
          <template #default="{ row }">
            <el-button type="primary" link size="small" @click="handleViewDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="batch-operate-container">
      <el-select size="small" v-model="operateType" placeholder="批量操作">
        <el-option v-for="item in operateOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
      <el-button class="search-button" @click="handleBatchOperate" type="primary" size="small"> 确定 </el-button>
    </div>
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="listQuery.pageNum"
        v-model:page-size="listQuery.pageSize"
        :page-sizes="[5, 10, 15]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { fetchList, deleteApply } from '@/api/returnApply'
import { ElMessage, ElMessageBox } from 'element-plus'
import { APPLY_STATUS_MAP, APPLY_STATUS_DICT } from '@/constant'
import type { ReturnApply, ReturnApplyPageDto } from '@/models/returnApply'
import BigNumber from 'bignumber.js'
import { formatDateTime } from '@/utils/format'

defineOptions({ name: 'ApplyList' })

const router = useRouter()
const listQuery = ref<ReturnApplyPageDto>({
  pageNum: 1,
  pageSize: 10,
})
const list = ref<ReturnApply[]>([])
const total = ref(0)
const listLoading = ref(false)
const multipleSelection = ref<ReturnApply[]>([])
const operateType = ref(1)
const operateOptions = ref([{ label: '批量删除', value: 1 }])

function formatReturnAmount(row: ReturnApply) {
  if (!row.productRealPrice || !row.productCount) return
  return new BigNumber(row.productRealPrice).multipliedBy(row.productCount).toNumber()
}
getList()

function handleSelectionChange(val: ReturnApply[]) {
  multipleSelection.value = val
}
function handleResetSearch() {
  listQuery.value = { pageNum: 1, pageSize: 10 }
  getList()
}
function handleSearchList() {
  listQuery.value.pageNum = 1
  getList()
}
function handleViewDetail(row: ReturnApply) {
  router.push({ path: '/oms/applyDetail', query: { id: row.id } })
}
async function handleBatchOperate() {
  if (multipleSelection.value == null || multipleSelection.value.length < 1) {
    ElMessage.success('请选择要操作的申请')
    return
  }
  if (operateType.value === 1) {
    //批量删除
    await ElMessageBox.confirm('是否要进行删除操作?', '提示', { type: 'warning' })
    let params = {
      ids: multipleSelection.value.map((i) => i.id).join(','),
    }
    await deleteApply(params)
    getList()
    ElMessage.success('删除成功')
  }
}
function handleSizeChange(val: number) {
  listQuery.value.pageNum = 1
  listQuery.value.pageSize = val
  getList()
}
function handleCurrentChange(val: number) {
  listQuery.value.pageNum = val
  getList()
}
async function getList() {
  listLoading.value = true
  try {
    const response = await fetchList(listQuery.value)
    listLoading.value = false
    list.value = response.data.data.list
    total.value = response.data.data.total
  } finally {
    listLoading.value = false
  }
}
</script>
<style scoped>
.input-width {
  width: 203px;
}
</style>
